import { createSlice } from '@reduxjs/toolkit'
import {setStorage, getStorage, removeAllStorage} from '../../utils/storage'
const ACTIVE_MENU_KEY = 'ACTIVE_MENU'
const LOCATION_KEY = 'LOCATION_KEY'
const THEME_KEY = 'Theme'
const AppSlice = createSlice({
    name: 'app',
    initialState: {
        isCollapsed: false,
        activeMenu:  getStorage(ACTIVE_MENU_KEY) || { key: 'users'},
        location: {
            province: '',
            city: ''
        },
        theme: 'light',
        isFullScreen: false
    },
    reducers: {
        setActiveMenu: (state,payload) => {
          state.activeMenu = payload.payload
          setStorage(ACTIVE_MENU_KEY,payload.payload)
        },
        collapseMenu: state => {
            state.isCollapsed = !state.isCollapsed
        },
        logOut: state => {
            removeAllStorage()
            state.activeMenu = { key: 'users'}
        },
        setLocation: ( state, payload) => {
            const { province, city } =  payload.payload
            state.location.province = province
            state.location.city = city
            setStorage(LOCATION_KEY,state.location)
        },
        setTheme: (state, payload) =>{
            state.theme = payload.payload
            setStorage(THEME_KEY,payload.payload)
        },
        setFullScreen: state => {
            state.isFullScreen = !state.isFullScreen
        }
    }
})

export default AppSlice.reducer
export const { setActiveMenu,collapseMenu,logOut,setLocation,setTheme,setFullScreen } = AppSlice.actions
